<template>
  <div class="w-1600px m-auto pt-44px">
    <div class="flex flex-justify-between">
      <div class="mt-100px">
        <div v-if="!userStore?.user_info?.name">
          <div
            @click="active('register')"
            class="zc cursor-pointer text-#fbf9f9 line-height-60px text-26px text-center"
          >
            注册
          </div>
          <div
            @click="active('login')"
            class="dl cursor-pointer text-#fbf9f9 line-height-60px text-26px text-center"
          >
            登录
          </div>
        </div>
        <div v-else class="shadow">
          <div class="flex flex-items-center mt--10px mb-5px">
            <el-avatar
              class="ml--10px"
              :size="40"
              :src="
                userStore.user_info.headimgurl ||
                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
              "
            />
            <p class="name ml-20px mt-20px">
              {{ userStore?.user_info?.name }}
              <el-popover
                placement="top-start"
                title=""
                :width="200"
                trigger="hover"
              >
                <template #reference>
                  <SvgIcon
                    class=""
                    name="vip"
                    color="#bb0615"
                    width="20px"
                    height="20px"
                    v-if="userStore?.user_info?.identity === 2"
                  />
                </template>
                <p class="font-600">
                  会员截止到: {{ userStore?.user_info?.enddate }}
                </p>
              </el-popover>
            </p>
          </div>
          <div
            v-for="item in icon_list"
            :key="item.name"
            class="ml-20px flex flex-items-center mb-10px"
          >
            <SvgIcon
              :class="item?.class"
              :name="item?.name"
              color="#bb0615"
              :width="item?.width"
              :height="item?.width"
            />
            <span
              @click="go(item?.path)"
              :style="{ color: $route.path === item?.path ? '#bb0615' : '' }"
              class="ml-10px hover-text-#bb0615"
              >{{ item?.title }}</span
            >
          </div>
          <div class="ml-20px flex flex-items-center mb-10px">
            <SvgIcon name="sz" color="#bb0615" width="20px" height="20px" />
            <span @click="handle_loginout" class="ml-10px hover-text-#bb0615"
              >退出登录</span
            >
          </div>
        </div>
      </div>
      <div class="w-1200px m-auto">
        <router-view />
      </div>
      <el-dialog
        v-model="operation_dialog"
        :close-on-click-modal="false"
        :show-close="false"
        title=""
        width="1200px"
        top="20vh"
      >
        <div class="ml-550px w-560px bg-#fcf9f9 py-60px px-50px">
          <el-menu
            :default-active="default_active"
            mode="horizontal"
            :ellipsis="false"
            @select="handleSelect"
            background-color="transparent"
            text-color="#000"
            active-text-color="#000"
            class="mt--50px mb-20px"
          >
            <el-menu-item index="login">
              <template #title>
                <span>密码登录</span>
              </template>
            </el-menu-item>
            <el-menu-item index="code_login">
              <template #title>
                <span>验证码登录</span>
              </template>
            </el-menu-item>
            <el-menu-item index="register">
              <template #title>
                <span>注册</span>
              </template>
            </el-menu-item>
            <el-menu-item index="forget">
              <template #title>
                <span>忘记密码</span>
              </template>
            </el-menu-item>
          </el-menu>
          <component
            :is="is"
            @close_register="close_register"
            @close_login="close_login"
            @close_forget="close_forget"
          />
          <el-button type="text" class="back_btn" @click="back_home"
            >返回首页</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import Login from "./components/login.vue";
import codeLogin from "./components/codeLogin.vue";
import Register from "./components/register.vue";
import Forget from "./components/forget.vue";
import { login_out } from "@/api/index";
import { ElMessage } from "element-plus";
import useUserStore from "@/store/modules/user";

let userStore = useUserStore();
const $router = useRouter();
const $route = useRoute();
const default_active = ref("");
const operation_dialog = ref(false);
const is_front_login = ref(sessionStorage.getItem("is_front_login") || "");
const icon_list = ref([
  {
    name: "sp",
    width: "20px",
    title: "视频搜索",
    path: "/search/video",
  },
  // {
  //   name: "ygm",
  //   width: "20px",
  //   title: "已购买的课程",
  //   path: "/search/buy",
  // },
  // {
  //   name: "dfk",
  //   width: "24px",
  //   class: "ml--3px",
  //   title: "待付款的课程",
  //   path: "/search/pay",
  // },
  {
    name: "dh",
    width: "20px",
    title: "兑换中心",
    path: "/search/exchange",
  },
  {
    name: "sz",
    width: "20px",
    title: "账号设置",
    path: "/search/account",
  },
  // {
  //   name: "sz",
  //   width: "20px",
  //   title: "退出登录",
  //   path: "",
  // },
]);
const is = ref(Login);
const mapping = ref({
  login: Login,
  code_login: codeLogin,
  register: Register,
  forget: Forget,
});

const back_home = () => {
  $router.push("/home");
};

const active = (type) => {
  operation_dialog.value = true;
  default_active.value = type;
  is.value = mapping.value[type];
};

if (!userStore?.user_info?.name) {
  active("login");
}
// is.value = mapping.value["login"];

const handle_loginout = async () => {
  const { data, code } = await login_out();
  if (code === 200) {
    sessionStorage.removeItem("is_front_login");
    userStore.user_info.name = "";
    userStore.user_info.headimgurl = "";
    $router.push("/search/video");
    ElMessage.success("退出成功");
    active("login");
  } else {
    ElMessage.error("退出失败！");
  }
};

const close_forget = (data) => {
  operation_dialog.value = data;
};
const close_login = (data) => {
  operation_dialog.value = data;
};
const close_register = (data) => {
  operation_dialog.value = data;
};

const handleSelect = (key, path) => {
  default_active.value = key;
  is.value = mapping.value[key];
};

const go = (path) => {
  $router.push(path);
};
</script>

<style scoped>
.back_btn {
  position: absolute;
  right: 20px;
  bottom: 10px;
}
.name {
  margin-bottom: 20px;
  padding-bottom: 5px;
  font-family: MicrosoftYaHei;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  line-height: 21px;
  letter-spacing: 2px;
  color: #020202;
  text-align: center;
  border-bottom: 2px solid #020202;
}
.shadow {
  padding: 20px 40px 30px;
  width: 284px;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(6, 6, 6, 0.21);
  border-radius: 10px;
  border: solid 1px #f3f2f2;
  cursor: pointer;
  font-size: 18px;
}
::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #fff !important;
}
::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 3px solid #bb0615;
  background-color: #fff !important;
}
::v-deep .el-menu-item:hover {
  font-size: 20px;
  border-bottom: 3px solid #bb0615;
  background-color: #fff !important;
}
::v-deep .el-menu-item {
  font-size: 20px;
  line-height: 36px;
}
::v-deep .el-menu--horizontal {
  border-bottom: none;
}
::v-deep .el-dialog {
  height: 550px;
  background-image: url("/login_bg.png");
  background-size: cover;
}
::v-deep .el-pager li.is-active {
  background-color: #bb0615 !important;
}
::v-deep .el-input__wrapper {
  width: 526px;
  border-radius: 22px;
}
::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 0.005208rem #c0c4cc inset;
}
.search {
  margin-right: -10px;
  width: 73px;
  height: 44px;
  background-color: #bb0615;
  border-radius: 22px;
  line-height: 42px;
  letter-spacing: 7px;
  color: #fcf7f7;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.zc {
  width: 159px;
  height: 60px;
  background-color: #bb0615;
  border-radius: 25px;
}
.dl {
  margin-top: 20px;
  width: 159px;
  height: 60px;
  background-color: #bfbfbf;
  border-radius: 25px;
}
</style>
